<template>
  <div class="container">
    <div class="content-container">
      <div v-if="spDataList.length > 0" class="activity-list">
        <div v-for="(item, index) in spDataList" :key="index" class="activity-card" :class="{ 'fade-in': animationTrigger }" :style="{ animationDelay: index * 0.1 + 's' }">
          <div class="activity-content">
            <div class="activity-image-container">
              <img :src="'https://www.wantongkonggu.cn/' + item.icon" :class="{ expired: item.expiredStatus != 0 }" class="activity-image" @error="handleImageError(index)" />
            </div>
            <!-- 添加供应商名称标签 -->
            <div v-if="item.isVendorActivity == 1" class="vendor-tag">
              {{ item.merName }}
            </div>
            <div class="activity-info">
              <div class="activity-name">{{ item.name }}</div>
              <div class="activity-time">
                <u-icon name="clock" size="20" color="#999"></u-icon>
                <text class="time-text">{{ item.startTime }} 至 {{ item.endTime }}</text>
              </div>

              <div class="activity-actions">
                <div class="status-tag" :class="item.statusTagClass">
                  {{ item.statusText }}
                </div>

                <div class="action-buttons">
                  <div @click.stop="goToInfo(item)" class="action-button coupon-button">
                    <u-icon name="coupon" size="30" color="#fff"></u-icon>
                    <text>消费券</text>
                  </div>

                  <div v-if="item.isVendorActivity == 0" @click="gotoEidt(item.id)" class="action-button edit-button">
                    <u-icon name="edit-pen" size="30" color="#2979ff"></u-icon>
                    <text>编辑</text>
                  </div>
                  <div v-else @click="gotoEidt(item.id)" class="action-button edit-button">
                    <u-icon name="edit-pen" size="30" color="#2979ff"></u-icon>
                    <text>详情</text>
                  </div>
                  <div @click.stop="delSh(item.id)" v-if="item.isVendorActivity == 0" class="action-button delete-button">
                    <u-icon name="trash" size="30" color="#fff"></u-icon>
                    <text>删除</text>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-else-if="!loading" class="empty-state">
        <u-empty mode="data" text="暂无活动数据" icon="http://cdn.uviewui.com/uview/empty/data.png" marginTop="100"> </u-empty>
      </div>

      <div v-if="loadingMore" class="loading-more">
        <u-loading-icon mode="circle" size="20" color="#2979ff"></u-loading-icon>
        <text class="loading-text">加载中...</text>
      </div>
    </div>

    <u-modal :show="delSpModel" @confirm="delSpFun" @cancel="delSpModel = false" :showCancelButton="true" confirmColor="#e54d42" confirmText="删除" content="是否确认删除该活动?">
    </u-modal>

    <div @click="gotoAdd()" class="add-button" hover-class="add-button-hover">
      <u-icon name="plus" color="#fff" size="20"></u-icon>
      <text class="add-button-text">添加活动</text>
    </div>
  </div>
</template>

<script>
import { activitylist, getUserInfo, activitydel } from '../../utils/request_sh.js';

export default {
  data() {
    return {
      merId: '',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      spDataList: [],
      delSpModel: false,
      delSpId: null,
      merName: '',
      animationTrigger: false,
      loading: true,
      loadingMore: false
    };
  },

  onLoad() {
    const userInfo = uni.getStorageSync('userInfo');
    const merId = userInfo ? userInfo.merId : '';
    getUserInfo(merId).then((res) => {
      uni.setStorageSync('shUserInfo', res.data);
      this.merName = res.data.merName;
      this.getData();
    });
  },

  onShow() {
    const userInfo = uni.getStorageSync('userInfo');
    this.merId = userInfo ? userInfo.merId : '';
    // 页面显示时刷新数据
    this.refreshData();
  },

  methods: {
    // 刷新数据
    refreshData() {
      this.pageNum = 1;
      this.spDataList = [];
      this.getData();
    },

    // 获取活动列表数据
    getData() {
      // 避免重复请求
      if (this.loadingMore) return;

      const params = {
        userRightComand: 'shanghuAdmin',
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        merName: this.merName,
        ebMerId: this.merId,
        isVendorActivity: 0
      };

      // 第一页加载时显示loading
      if (this.pageNum === 1) {
        this.loading = true;
      } else {
        this.loadingMore = true;
      }

      activitylist(params)
        .then((res) => {
          this.total = res.total;
          let newlist = res.rows;

          // 为每个活动项添加状态标签类和文本
          newlist = newlist.map((item) => {
            return {
              ...item,
              statusTagClass: this.getStatusTagClass(item.expiredStatus, item.status),
              statusText: this.getStatusText(item.expiredStatus, item.status)
            };
          });

          if (this.pageNum === 1) {
            this.spDataList = newlist;
          } else {
            this.spDataList.push(...newlist);
          }

          // 触发动画
          this.animationTrigger = false;
          this.$nextTick(() => {
            this.animationTrigger = true;
          });
        })
        .catch((err) => {
          console.error('获取活动列表失败:', err);
          uni.showToast({
            title: '获取数据失败',
            icon: 'none'
          });
        })
        .finally(() => {
          this.loading = false;
          this.loadingMore = false;
        });
    },

    // 获取状态标签类名
    getStatusTagClass(expiredStatus, status) {
      if (expiredStatus !== 0) {
        return 'expired-tag';
      } else if (status === 0) {
        return 'published-tag';
      } else {
        return 'unpublished-tag';
      }
    },

    // 获取状态文本
    getStatusText(expiredStatus, status) {
      if (expiredStatus !== 0) {
        return '已过期';
      } else if (status === 0) {
        return '已上架';
      } else {
        return '未上架';
      }
    },

    // 跳转到消费券详情
    goToInfo(item) {
      uni.navigateTo({
        url: '/pages_sh/hdInfo/hdxfj?id=' + item.id + '&isVendorActivity=' + item.isVendorActivity
      });
    },

    // 删除活动确认
    delSpFun() {
      activitydel(this.delSpId)
        .then((res) => {
          if (res.code === 200) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
            this.delSpModel = false;
            this.refreshData();
          } else {
            uni.showToast({
              title: '删除失败',
              icon: 'none'
            });
          }
        })
        .catch((err) => {
          uni.showToast({
            title: '删除出错',
            icon: 'none'
          });
          console.error('删除活动出错:', err);
        });
    },

    // 打开删除确认框
    delSh(id) {
      this.delSpId = id;
      this.delSpModel = true;
    },

    // 跳转到添加活动页面
    gotoAdd() {
      uni.navigateTo({
        url: '/pages_sh/hdInfo/index'
      });
    },

    // 跳转到编辑活动页面
    gotoEidt(id) {
      console.log('🚀 ~ gotoEidt ~ id:', id);
      uni.navigateTo({
        url: '/pages_sh/editSpHd/index?id=' + id
      });
    },

    // 处理图片加载失败
    handleImageError(index) {
      // 可以设置默认图片
      // this.spDataList[index].icon = '默认图片路径'
    }
  },

  // 上拉加载更多
  onReachBottom() {
    const allTotal = this.pageNum * this.pageSize;
    if (allTotal < this.total) {
      // 当前条数小于总条数 则增加请求页数
      this.pageNum++;
      this.getData();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.content-container {
  padding: 0 20rpx;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.activity-card {
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
  transform: translateY(100rpx);
  opacity: 0;
  transition: all 0.6s ease;

  &.fade-in {
    transform: translateY(0);
    opacity: 1;
  }
}

.activity-content {
  position: relative;
}

.activity-image-container {
  width: 100%;
  height: 320rpx;
  overflow: hidden;
  position: relative;
}

.activity-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;

  &.expired {
    filter: grayscale(100%);
    opacity: 0.6;
  }
}

.vendor-tag {
  position: absolute;
  top: 20rpx;
  right: -60rpx;
  background-color: #ff6b35;
  color: white;
  padding: 10rpx 40rpx;
  font-size: 24rpx;
  font-weight: bold;
  transform: rotate(45deg);
  z-index: 10;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.activity-info {
  padding: 24rpx;
}

.activity-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 16rpx;
  line-height: 1.4;
}

.activity-time {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;

  .time-text {
    margin-left: 12rpx;
    font-size: 26rpx;
    color: #999999;
  }
}

.activity-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-tag {
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  font-weight: bold;

  &.ongoing {
    background-color: #e8f7f0;
    color: #00b894;
  }

  &.upcoming {
    background-color: #fff3e0;
    color: #ff9800;
  }

  &.ended {
    background-color: #f0f0f0;
    color: #999999;
  }
}

.action-buttons {
  display: flex;
  gap: 16rpx;
}

.action-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12rpx 16rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  cursor: pointer;
  transition: all 0.2s ease;

  &.coupon-button {
    background-color: #007aff;
    color: white;
  }

  &.edit-button {
    background-color: #e3f2fd;
    color: #2979ff;
  }

  &.delete-button {
    background-color: #ffebee;
    color: #e54d42;
  }
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
}

.loading-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;

  .loading-text {
    margin-left: 16rpx;
    font-size: 28rpx;
    color: #999999;
  }
}

.add-button {
  position: fixed;
  bottom: 60rpx;
  right: 60rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #007aff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.4);
  transition: all 0.2s ease;
  z-index: 999;

  &-text {
    font-size: 20rpx;
    color: white;
    margin-top: 4rpx;
  }

  &:active {
    transform: scale(0.95);
  }
}

.add-button-hover {
  transform: scale(1.05);
}
</style>
